<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <ui>
                <!-- :key 唯一性，提高虚拟dom效率-->
                <li v-for="item in names" :key="item">
                    {{item}}
                </li>
            </ui>
            <ui>
                   <!-- 遍历数组-->
                <li v-for="(item,index) in names">
                    {{index+1}} .{{item}}
                </li>
            </ui>
            <ui>
                <!-- 遍历对象-->
                <li v-for="(value,key) in info">
                   {{key}},{{value}}
                </li>
            </ui>
    </div>
    <script src="../js/vue.js"></script>
 <script>
        const app=new Vue({
            el:'#app',
            data:{
                names:["a","b","c"],
                info:{
                    name:"why",
                    age:18,
                    height:1.88
                }
                
            }
        })
    </script>
</body>
</html>